<script setup>
import {nextTick, onMounted, ref} from "vue";
import request from "@/assets/js/mobileRequest";
import {useRoute, useRouter} from "vue-router";
import {currentUser} from "@/App.vue";
import qs from "qs";
import {showNotify, showSuccessToast} from 'vant';

const router = useRouter();
const route = useRoute();
const onClickLeft = () => router.back();

const orderCards = ref({});

const finalAccount = ref();

const userInfo = ref({
  username:'test',
  description:'吾心吾行澄如明镜，所作所为皆是正义。吾心吾行澄如明镜，所作所为皆是正义。',
  level: 10,
  gender: '男',
  avatarImgUrl:'',
  userId:''
});

const receptionOrder = ()=> {
  orderCards.value.riderId = userInfo.value.userId;
  orderCards.value.orderStatus = '进行中';
  orderCards.value.riderName = userInfo.value.username;
  console.log(orderCards.value);
  let data = qs.stringify(orderCards.value);
  console.log(data);
  request.post(BASE_URL + '/v1/order/insert', data).then((response) => {
    if (response.data.code === 2000) {
      showSuccessToast('接单成功!');
      setTimeout(function () {
        router.push('/');
      },1000);
    }
  })
}

onMounted(() => {
  let orderId = new URLSearchParams(location.search).get('orderId')
  console.log(orderId);
  request.get(BASE_URL + "/v1/order/select?orderId=" + orderId).then((response) => {
    if (response.data.code === 2000) {
      orderCards.value = response.data.data[0];
      console.log(orderCards.value);
      finalAccount.value = (orderCards.value.orderPrice*1.1).toFixed(2);
      nextTick(() => {
        userInfo.value = currentUser.value;
        console.log(userInfo.value);
      })
    }
  })
})
</script>

<template>
  <div style="background-color: #f7f8fa">
    <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-cell-group style="text-align: left;">
      <van-cell title="订单信息" style="font-weight: bold;"/>
      <van-cell title="订单标题" :value="orderCards.orderTitle"/>
      <van-cell title="订单类型" :value="'校园派'+orderCards.orderType+'服务'"/>
      <van-cell title="订单号" :value="orderCards.orderId"/>
      <van-cell title="支付时间" :value="orderCards.creationTime"/>
      <van-cell title="订单描述" :label="orderCards.orderDescription"/>
    </van-cell-group>
    <br>
    <van-cell-group style="text-align: left;">
      <van-cell title="位置" style="font-weight: bold;"/>
      <van-steps direction="vertical" :active="0" size="middle">
        <van-step>
          <div>{{orderCards.startLocation}}-{{ orderCards.detailedStartLocation }}</div>
        </van-step>
        <van-step>
          <div>{{orderCards.endLocation}}-{{ orderCards.detailedEndLocation }}</div>
        </van-step>
      </van-steps>
    </van-cell-group>
    <br>
    <van-cell-group style="text-align: left;">
      <van-cell title="订单金额" style="font-weight: bold;"/>
      <van-cell title="订单价格" :value="'￥'+orderCards.orderPrice"/>
      <van-cell title="跑腿费" :value="'￥'+(orderCards.orderPrice* 0.1).toFixed(2)"/>
      <van-cell title="合计" :value="'￥'+finalAccount"/>
    </van-cell-group>
    <br>
    <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" style="width: 80%;margin-left: 10%" @click="receptionOrder">
      接单
    </van-button>
  </div>
</template>

<style scoped>

</style>